<template>
  <div class="blog-detail">
    <el-card v-loading="loading">
      <template #header>
        <div class="header">
          <h1 class="title">{{ blog?.title }}</h1>
          <div class="meta">
            <el-tag size="small">{{ blog?.category }}</el-tag>
            <span class="time">
              <el-icon><Calendar /></el-icon>
              {{ formatDate(blog?.createTime) }}
            </span>
            <span class="author">
              <el-icon><User /></el-icon>
              {{ blog?.author }}
            </span>
            <span class="views">
              <el-icon><View /></el-icon>
              {{ blog?.viewCount }}
            </span>
          </div>
        </div>
      </template>
      
      <div class="content markdown-body" v-html="renderedContent" />
      
      <div class="tags">
        <el-tag
          v-for="tag in blog?.tags"
          :key="tag"
          size="small"
          effect="plain"
          class="tag"
        >
          {{ tag }}
        </el-tag>
      </div>
      
      <div class="comments">
        <h3>评论</h3>
        <comment-list
          :comments="comments"
          @submit="handleCommentSubmit"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Calendar, User, View } from '@element-plus/icons-vue'
import { marked } from 'marked'
import hljs from 'highlight.js'
import type { Blog, Comment } from '@/types'
import { formatDate } from '@/utils/format'
import CommentList from '../comment/CommentList.vue'

const props = defineProps<{
  blog?: Blog
  loading?: boolean
}>()

const comments = ref<Comment[]>([])

const renderedContent = computed(() => {
  if (!props.blog?.content) return ''
  return marked(props.blog.content, {
    highlight: (code, lang) => {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(code, { language: lang }).value
      }
      return hljs.highlightAuto(code).value
    }
  })
})

const handleCommentSubmit = async (content: string) => {
  // TODO: 实现评论提交逻辑
}
</script>

<style lang="scss" scoped>
.blog-detail {
  .header {
    .title {
      margin: 0 0 15px;
      font-size: 2em;
    }
    
    .meta {
      display: flex;
      align-items: center;
      gap: 15px;
      color: #999;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
  
  .content {
    margin: 20px 0;
    line-height: 1.8;
  }
  
  .tags {
    margin: 20px 0;
    
    .tag {
      margin-right: 8px;
    }
  }
  
  .comments {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    
    h3 {
      margin-bottom: 20px;
    }
  }
}
</style> 